import { Space } from 'antd-mobile';

import './style.scss';

export default function(props) {

  const { list = [], onEmojiClick, messageId } = props;

  return (<div className="emoReplyBarComponent">
    <Space wrap={true}>
      { list.map((item, index) =>
        <div className="replyItem" key={index} onClick={() => onEmojiClick(item?.faceContent, messageId)}>
          <img
            src={item?.faceContent?.iconUrl}
            alt="emoji"
            style={{width: '17px', height: '17px' }
          }/>  {item.from?.nickName || item.form?.userId}
        </div>
        )
      }
      {/* <div className="replyItem">
        todo: icon
        <SmileOutlined style={{ fontSize: 17 }} />
      </div> */}
    </Space>
  </div>)
}